import { createElement } from "../../../utils";
import BaseNode from "../../BaseNode";

export default class InputNode extends BaseNode {
  element = createElement("div");
  private _inputEl = createElement("input", {
    style: {
      border: "none",
      outline: "none",
      fontSize: "14px",
      width: "100%",
      height: "100%",
      textAlign: "left",
      background: "none",
    }
  });

  protected _nodeType: VoucherNodeType = "input";
  protected _options: VoucherInputTemplate = {
    type: "text", // 输入框类型
    mark: "", // 标记
    name: "", // 输入框名称
    weight: 1, // 输入框权重

    fontSize: 14, // 字体大小
    bold: false, // 是否加粗
    width: 200, // 输入框宽度
    height: 32, // 输入框高度
    align: "left", // 输入框对齐方式

    x: 0, // 输入框x坐标
    y: 0, // 输入框y坐标

    maxlength: 0, // 输入框最大长度
    letterSpacing: 0, // 文字间距
    placeholder: "", // 占位符

    value: "", // 输入框值
  }

  get options() {
    return { ...this._options };
  }


  constructor({ type = "text", mark = "", name = "", weight = 1, fontSize = 14, bold = false, width = 200, height = 32, align = "left", x = 0, y = 0, maxlength = 0, letterSpacing = 0, placeholder = "", value = "" }: VoucherInputTemplate, isRootNode = true) {
    super(isRootNode);
    if (isRootNode) this.element.style.position = "absolute";

    this._options = { type, mark, name, weight, fontSize, bold, width, height, align, x, y, maxlength, letterSpacing, placeholder, value }
    this.render();
    this.onInput()
  }


  private render() {
    const { type, mark, name, weight, fontSize, bold, width, height, align, x, y, maxlength, letterSpacing, placeholder, value } = this.options
    if (this.isRootNode) {
      this.element.style.position = "absolute";
      this.element.style.left = `${x}px`;
      this.element.style.top = `${y}px`;
    }
    this.element.style.width = `${width}px`;
    this.element.style.height = `${height}px`;
    this._inputEl.value = value;
    this._inputEl.style.letterSpacing = `${letterSpacing}px`;
    this._inputEl.setAttribute("placeholder", placeholder);
    if (maxlength > 0) {
      this._inputEl.setAttribute("maxlength", maxlength.toString());
    } else {
      this._inputEl.removeAttribute("maxlength")
    }
    this._inputEl.style.textAlign = align;
    this._inputEl.style.fontSize = `${fontSize}px`;
    this._inputEl.style.fontWeight = bold ? "bold" : "normal";
    this.element.appendChild(this._inputEl)
  }

  private onInput() {
    this._inputEl.addEventListener("input", (e) => {
      this._options.value = this._inputEl.value;
      this._changes.forEach((fn) => { fn({ value: this._options.value }) })
    })
  }

  public setOptions({ type, mark, name, weight, fontSize, bold, width, height, align, x, y, maxlength, letterSpacing, placeholder, value }: Partial<VoucherInputTemplate>) {
    if (type !== undefined) this._options.type = type
    if (mark !== undefined) this._options.mark = mark
    if (name !== undefined) this._options.name = name
    if (weight !== undefined) this._options.weight = weight
    if (fontSize !== undefined) this._options.fontSize = fontSize
    if (bold !== undefined) this._options.bold = bold

    if (width !== undefined) this._options.width = width
    if (height !== undefined) this._options.height = height
    if (align !== undefined) this._options.align = align
    if (x !== undefined) this._options.x = x
    if (y !== undefined) this._options.y = y
    if (maxlength !== undefined) this._options.maxlength = maxlength
    if (letterSpacing !== undefined) this._options.letterSpacing = letterSpacing
    if (placeholder !== undefined) this._options.placeholder = placeholder
    if (value !== undefined) this._options.value = value
    this.render()
  }

  public getOptions(): VoucherInputTemplate {
    return this.options
  }
}